<script setup>
import router from "@/router/index.js"
import {ref,onBeforeUnmount,onMounted} from "vue"
import {usePageStore, useTagStore} from "@/stores/index.js"
import {queryUserByTag} from "@/api/user.js";
import {showLoadingToast} from "vant";
import {queryTeamByTags} from "@/api/team.js";

const active = ref(0)
const tags = ref([])

const userCurrentPage = ref(1)
const userList = ref([])
const error = ref(false)
const loading = ref(false);
const finished = ref(false);

const teamCurrentPage = ref(1)
const teamList = ref([])
const teamError = ref(false)
const teamLoading = ref(false);
const teamFinished = ref(false);

const onClickLeft = () => {
  router.back()
}

/**
 * 获取搜索标签
 */
const getSearchTags = () => {
  const tagStore = useTagStore()
  for (let item of tagStore.tags) {
    tags.value.push(item.text)
  }
}
getSearchTags()

/**
 * 进行搜索
 */
const searchUserByTags = () => {
  showLoadingToast({
    message: '加载中...',
    duration: 0,
    forbidClick: true,
  })
  const pageForm = {
    currentPage: userCurrentPage.value,
    tags: tags.value
  }
  queryUserByTag(pageForm).then((res) => {
    if (res.data.code === 1) {
      userList.value = res.data.data
      // eslint-disable-next-line no-undef
      closeToast()
    } else {
      // eslint-disable-next-line no-undef
      showToast(res.data.msg)
    }
  }).catch((err) => {
    console.log(err)
  })
}
searchUserByTags()

/**
 * 滚动分页
 */
const onLoad = async () => {
  // 异步更新数据
  userCurrentPage.value += 1
  try {
    const pageForm = {
      currentPage: userCurrentPage.value,
      tags: tags.value
    }
    const res = await queryUserByTag(pageForm)
    if (res.data.code === 1) {
      if (res.data.data.length === 0) {
        finished.value = true;
      }
      userList.value.push(...res.data.data)
    } else {
      // eslint-disable-next-line no-undef
      showToast(res.data.msg)
      error.value = true;
    }
  } catch (e) {
    console.log(e)
    error.value = true;
  }
  loading.value = false;
};

/**
 * 搜索队伍
 */
const searchTeamByTags = () => {
  showLoadingToast({
    message: '加载中...',
    duration: 0,
    forbidClick: true,
  })
  const pageForm = {
    currentPage: teamCurrentPage.value,
    tags: tags.value
  }
  queryTeamByTags(pageForm).then((res) => {
    if (res.data.code === 1) {
      teamList.value = res.data.data
      // eslint-disable-next-line no-undef
      closeToast()
    } else {
      // eslint-disable-next-line no-undef
      showToast(res.data.msg)
    }
  }).catch((err) => {
    console.log(err)
  })
}
searchTeamByTags()

/**
 * 队伍滚动分页
 */
const teamOnLoad = async () => {
  // 异步更新数据
  teamCurrentPage.value += 1
  try {
    const pageForm = {
      currentPage: teamCurrentPage.value,
      tags: tags.value
    }
    const res = await queryTeamByTags(pageForm)
    if (res.data.code === 1) {
      if (res.data.data.length === 0) {
        teamFinished.value = true;
      }
      teamList.value.push(...res.data.data)
    } else {
      // eslint-disable-next-line no-undef
      showToast(res.data.msg)
      teamError.value = true;
    }
  } catch (e) {
    console.log(e)
    teamError.value = true;
  }
  teamLoading.value = false;
}

onMounted(() => {
  const pageStore = usePageStore()
  active.value = pageStore.getActive()
})

onBeforeUnmount(() => {
  const pageStore = usePageStore()
  pageStore.setActive(active.value)
})
</script>

<template>
  <div class="tag-search-page">
    <van-nav-bar
      fixed
      left-arrow
      left-text="返回"
      placeholder
      title="搜索结果"
      @click-left="onClickLeft"
    />
    <van-tabs v-model:active="active">
      <van-tab title="用户">
        <div v-if="userList.length" class="user-card-container">
          <van-list
            v-model:error="error"
            v-model:loading="loading"
            :finished="finished"
            :immediate-check="false"
            error-text="请求失败，点击重新加载"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <user-card
              v-for="(item,index) in userList"
              :id="item.id"
              :key="index"
              :avatar="item.avatar"
              :description="item.description"
              :nickname="item.nickname"
              :tags="item.tags"
            ></user-card>
          </van-list>
        </div>
        <van-empty v-else description="未找到匹配的用户"></van-empty>
      </van-tab>
      <van-tab title="队伍">
        <div v-if="teamList.length" class="team-card-container">
          <van-list
            v-model:error="teamError"
            v-model:loading="teamLoading"
            :finished="teamFinished"
            :immediate-check="false"
            error-text="请求失败，点击重新加载"
            finished-text="没有更多了"
            @load="teamOnLoad"
          >
            <team-card
              v-for="(item,index) in teamList"
              :id="item.id"
              :key="index"
              :current-members="item.currentMember"
              :description="item.teamDesc"
              :image-src="item.image"
              :leader-name="item.teamLeader"
              :max-members="item.maxMember"
              :tags="item.tags"
              :team-name="item.teamName"
              class="team-card"
            >
            </team-card>
          </van-list>
        </div>
        <van-empty v-else description="未找到匹配的队伍"></van-empty>
      </van-tab>
    </van-tabs>
    <van-back-top />
  </div>
</template>

<style scoped>
.tag-search-page {
  min-height: 100vh;
  background-color: #f1f1f1;
}

.user-card-container, .team-card-container {
  padding: 10px;
}

.user-card-container .user-card, .team-card-container .team-card {
  margin-bottom: 10px;
}
</style>
